<template>
  <div class="repair-effectiveness-report-page">
    <el-card>
      <div style="font-weight: bold; margin-bottom: 16px;">报修时效统计</div>
      <div ref="effectivenessChart" style="height: 400px;"></div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'

const effectivenessChart = ref(null)
let chartInstance = null

const fetchEffectivenessStat = async () => {
  const res = await request.get('/repair/report/effectivenessStat')
  if (res.code === 1) {
    renderChart(res.data)
  }
}
const renderChart = (data) => {
  if (!chartInstance) {
    chartInstance = echarts.init(effectivenessChart.value)
  }
  chartInstance.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: data.map(item => item.range) },
    yAxis: { type: 'value' },
    series: [
      {
        name: '报修单数量',
        type: 'bar',
        data: data.map(item => item.count)
      }
    ]
  })
}
onMounted(() => {
  fetchEffectivenessStat()
})
</script>

<style scoped>
.repair-effectiveness-report-page {
  padding: 24px;
}
</style> 